var oSliderBox = document.getElementById("sliderBox");
var oSliderList = document.getElementById("sliderList");
var aList = oSliderList.children;
//轮播区块的个数
var len = aList.length;
//获取单个li的宽度，这个宽度也是每次ul向左移动距离
var perWidth = aList[0].offsetWidth;
//动态设置ul的宽度，因为轮播的区块是会改变的
oSliderList.style.width = len * perWidth + "px";
//开始向左移动 每隔3秒移动一次，考虑使用定时器

var i = 0; //每一次移动的值都是变化的

function move() {
    i++;
    //控制i的临界值，不然会出现空白

    if (i == len) { //从第4张到第5张展现时
        i = 1; //需要将i值变成1，显示第2张，因为第4张和第一张的图片一样
        oSliderList.style.left = 0; //为了让用户能看到是从第一张正常变成第二张，直接定位到第一张，由于第4张和第1张图片一模一样，用户看不到任何波动效果
    }

    if (i == -1) { //321321的顺序
        i = len - 2; //倒数第2张
        oSliderList.style.left = -(len - 1) * perWidth + "px"
    }

    //控制小圆点点亮
    for (let j = 0; j < aNumList.length; j++) {
        aNumList[j].className = "";
    }

    //显示最后一个区块时，应该让第一个小圆点点亮
    if (i == len - 1) {
        aNumList[0].className = "hover";
    } else {
        aNumList[i].className = "hover";
    }

    //当前显示那个区块是由i控制
    //-3*900 -> -1*900
    //0->-1*900

    startMove(oSliderList, {
        "left": -i * perWidth
    });
}

var timer = setInterval(function () {
    move();
}, 3000);

//获取箭头，添加点击事件
var oBtn = document.getElementById("btn");
var aBtns = oBtn.children;
//左箭头321321
aBtns[0].onclick = function () {
    i -= 2; //因为move里有个i++
    move();
}
//右箭头 123123
aBtns[1].onclick = function () {
    move();
}

//获取小圆点，添加鼠标移入事件
var oNumList = document.getElementById("numList");
var aNumList = oNumList.children;
for (let j = 0; j < aNumList.length; j++) {
    aNumList[j].onmouseover = function () {
        i = j - 1; //移到第一个圆点上去，应该显示第1张，但是move里有个i++，所以赋值时要减1
        move();
    }
}


//鼠标移入轮播区域就清定时器
oSliderBox.onmouseover = function () {
    clearInterval(timer);
}
oSliderBox.onmouseout = function () {
    timer = setInterval(function () {
        move();
    }, 3000)
}

var ming = document.getElementById("ming");
var cook = document.cookie;
var arr = cook.split("; ");
var uid = 0;
var token1 = 0;
var id =0;
var token = 0;
var name = 0;
for (var i = 0; i < arr.length; i++) {
    var newArr = arr[i].split("=");
    if (newArr[0] == "id") {
        id = newArr[0];
        uid = newArr[1];
    }
    if (newArr[0] == "token") {
        token = newArr[0];
        token1 = newArr[1];
    }
    if (newArr[0] == "usename") {
        name = newArr[0];
        var strr = `
      <a href="login.html" id="ming">${newArr[1]}</a>&nbsp;&nbsp;&nbsp;
      <a href="" id="tc" >退出</a>
      `;
        tui.innerHTML = strr;
        $("#tc").click(function () {
            
            var oDate = new Date();
            oDate.setDate(oDate.getDate() - 1);
            document.cookie = id + "=" + uid + ";expires=" + oDate;
            document.cookie = name + "=" + newArr[1] + ";expires=" + oDate;
            document.cookie = token + "=" + token + ";expires=" + oDate;
            var strr = `
            <a href="login.html" id="ming">请登录</a>
            `;
              tui.innerHTML = strr;
              alert("退出登录！")
        });
    }
}


if (uid != 0) {
    var pi = document.getElementById("jx-n");
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
        uid: uid
    }, data => {
        var str = "";
        for (var i = 1; i < 6; i++) {

            str += `
                <div class="jx-n-yi">
                    <div class="img">
                        <a href="deta.html?id=${data.data[i].pid}" class="tiao"><img src="../${data.data[i].pimg}" alt=""></a>
                    </div>
                    <div class="jies">
                        <span>海外品牌</span>
                        <h3>${data.data[i].pname}</h3>
                        <p>${data.data[i].pdesc}</p>
                    </div>
                    <div class="left">
                        <span class="rmb">￥</span>
                        <span class="jia">${Math.floor(data.data[i].pprice)}</span>
                        <span class="yj">￥3090.00</span>
                        <span class="ys">已售10件</span>
                    </div>
                    <div class="qi">
                        <a href="deta.html?id=${data.data[i].pid}" class="qiang">马上抢</a>
                    </div>
                </div>
        `;

        }
        pi.innerHTML = str;

    });









    var zd = document.getElementById("zd");
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
        uid: uid
    }, data => {
        var str2 = "";
        for (var i = 1; i < 4; i++) {
            str2 += `
            <div class="zhong-d-yi">
                <img src="../${data.data[i].pimg}" alt="">
                <p>${data.data[i].pname}</p>
                <span class="rem">￥</span>
                <i>${Math.floor(data.data[i].pprice)}</i>
                <span class="rem-q">￥103</span>
            </div>
        `;

        }
        zd.innerHTML = str2;
    });
}

